<template>
    <div class="leftView">
        <div class="put">
            <el-input placeholder="请输入机器人名称" prefix-icon="el-icon-search" clearable></el-input>
        </div>
        <!-- 机器人列表 -->
        <div class="robotTable">
            <div class="tableTitle">
                <p>机器人编号</p>
                <p>名称</p>
                <p></p>
                <p>选择</p>
            </div>
            <div class="tableCenter">
                <div :class="{ 'active': isActiveRow(item.id) }" class="tableBody" v-for="item in table1" :key='item.id'
                    @click="getRobotName(item)">
                    <p>{{ item.robotNo }}</p>
                    <p>{{ item.robotName }}</p>
                    <p></p>
                    <p v-if="robotId != item.id"><img src="../../../images/xuanze-no.png" alt=""
                            style="width:14px;height:14px;"></p>
                    <p v-if="robotId == item.id"><img src="../../../images/xuanze.png" alt=""
                            style="width:14px;height:14px;"></p>
                </div>
            </div>
        </div>
        <!-- 机械臂列表
        <div class="roboticArm">
            <div class="tableTitle">
                <p>机械臂编号</p>
                <p>名称</p>
                <p></p>
                <p>状态</p>
            </div>
            <div class="tableCenter">
                <div class="tableBody" v-for="(item, index) in table11" :key="index">
                    <p>{{ item.number }}</p>
                    <p>{{ item.name }}</p>
                    <p></p>
                    <div v-if="item.state == 0" class="wzx">
                        <p>未执行</p>
                    </div>
                    <div v-if="item.state == 1" class="yzx">
                        <p>已执行</p>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- 预处理端列表 -->
        <div class="preprocessing">
            <div class="tableTitle">
                <p>预处理端编号</p>
                <p>类型</p>
                <p>名称</p>
                <p>选择</p>
            </div>
            <div class="tableCenter">
                <div class="tableBody" :class="{ 'active': isYclActiveRow(item.id) }" v-for="item in table12"
                    :key="item.id" @click="getYCLdata(item)">
                    <p>{{ item.poorNo }}</p>
                    <p>{{ item.processAttr }}</p>
                    <p>{{ item.preName }}</p>
                    <p v-if="yclId != item.id"><img src="../../../images/xuanze-no.png" alt=""
                            style="width:14px;height:14px;"></p>
                    <p v-if="yclId == item.id"><img src="../../../images/xuanze.png" alt=""
                            style="width:14px;height:14px;"></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getRobotList, getPreList } from '@/api/cyRobot/controls'
export default {
    name: 'LeftView',
    data() {
        return {
            table1: [],
            table12: [],
            robotTitle: localStorage.getItem('robotName') || '',
            robotId: localStorage.getItem('robotId') || '',
            YclName: localStorage.getItem('YclName') || '',
            yclId: localStorage.getItem('yclId') || '',
            yclConIp: localStorage.getItem('yclConIp') || ''
        }
    },
    created() {
        this.robotList()
        this.PreList()
    },
    mounted() {
        this.timer = setInterval(() => {
            this.robotList()
            this.PreList()
        }, 2000)
    },
    methods: {
        //获取机器人列表
        robotList() {
            getRobotList().then(response => {
                this.table1 = response.rows
            })
        },
        //选择机器人
        getRobotName(item) {
            //更新本地存储中的机器人id
            localStorage.setItem('robotId', item.id)
            //更新本地存储中的摄像头IP和机器人在线离线状态
            localStorage.setItem('selectRobotStatus', item.robotStatus)
            console.log('控制页被选中的机器人的状态', item.robotStatus)
            localStorage.setItem('robotCamIP', item.camIP)
            this.$bus.$emit('updateRobotCamIP', item.camIP)

            //更新机器人id
            this.robotId = item.id
            this.$bus.$emit('updateRobotId', this.robotId)

            //更新本地存储中的机器人名称
            localStorage.setItem('robotName', item.robotName)
            //更新机器人名称
            this.robotTitle = item.robotName
            this.$bus.$emit('updateRobotTitle', this.robotTitle)
        },
        //机器人列表
        isActiveRow(id) {
            return this.robotId === id;
        },
        //预处理列表
        isYclActiveRow(id) {
            return this.yclId === id
        },
        //获取预处理端列表
        PreList() {
            getPreList().then(response => {
                this.table12 = response.rows
            })
        },
        //选择预处理端
        getYCLdata(item) {
            //预处理站名字
            this.YclName = item.preName
            this.$bus.$emit('updateYclName', this.YclName)
            //更新本地存储中的预处理端
            localStorage.setItem('YclName', item.preName)
            localStorage.setItem('yclId', item.id)
            localStorage.setItem('yclConIp', item.conIP)

            // 更新预处理端 id 和 conIP
            this.yclId = item.id;
            this.yclConIp = item.conIP;

            // 传递预处理端 id 和 conIP
            this.$bus.$emit('updateYclData', { id: this.yclId, conIp: this.yclConIp });
        }
    },
    beforeDestroy() {
        if (this.timer) { clearInterval(this.timer); }
    }

}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.tableCenter::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条（仅适用于webkit内核的浏览器，如Chrome、Safari） */
}

.leftView {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // background-color: darkorchid;
    .put {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 5px;
        padding-right: 5px;

        // background-color: aquamarine;
        ::v-deep .el-input__inner {
            width: 100%;
            background: #16395D;
            border-radius: 2px;
            border: 1px solid #1560AC;
        }
    }

    //机器人列表
    .robotTable {
        width: 100%;
        height: 30%;
        padding-left: 5px;
        padding-right: 5px;

        //background-color: indianred;
        .tableTitle {
            width: 100%;
            height: 40px;
            background: #F5F5F5;
            border-radius: 2px;
            display: flex;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 12px;
            color: #123150;

            >p {
                height: 40px;
                width: 25%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .tableCenter {
            width: 100%;
            height: 78%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 10px;
            color: #EDEDED;
            overflow-y: auto;

            .tableBody {
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
                cursor: pointer;
                background: #20466D;
                margin-top: 4px;

                >p {
                    height: 40px;
                    width: 25%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .active {
                background: #17A4A2;
                border-radius: 5px;
            }

        }
    }

    //机械臂列表
    .roboticArm {
        width: 100%;
        height: 30%;
        padding-left: 5px;
        padding-right: 5px;

        // background-color: greenyellow;
        .tableTitle {
            width: 100%;
            height: 40px;
            background: #F5F5F5;
            border-radius: 2px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 12px;
            color: #123150;
            display: flex;
            justify-content: center;
            align-items: center;

            >p {
                height: 40px;
                width: 25%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .tableCenter {
            width: 100%;
            height: 78%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 10px;
            color: #EDEDED;
            overflow-y: auto;

            .tableBody {
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
                cursor: pointer;
                background: #20466D;
                margin-top: 4px;

                >p {
                    height: 40px;
                    width: 25%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .wzx {
                    width: 25%;
                    height: 40px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #C4C3C3;

                    >p {
                        width: 36px;
                        height: 14px;
                        background: #192A3C;
                        border-radius: 2px;
                        border: 1px solid #C4C3C3;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .yzx {
                    width: 25%;
                    height: 40px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #3BE27E;

                    >p {
                        width: 36px;
                        height: 14px;
                        background: #0B3A17;
                        border-radius: 2px;
                        border: 1px solid #31C76B;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

        }
    }

    //预处理端列表
    .preprocessing {
        width: 100%;
        height: 30%;
        // background-color: rgb(101, 244, 244);
        padding-left: 5px;
        padding-right: 5px;

        .tableTitle {
            width: 100%;
            height: 40px;
            background: #F5F5F5;
            border-radius: 2px;
            display: flex;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 12px;
            color: #123150;

            >p {
                height: 40px;
                width: 25%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .tableCenter {
            width: 100%;
            height: 78%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 10px;
            color: #EDEDED;
            overflow-y: auto;

            .tableBody {
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
                cursor: pointer;
                background: #20466D;
                margin-top: 4px;

                >p {
                    height: 40px;
                    width: 25%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .active {
                background: #17A4A2;
                border-radius: 5px;
            }

        }
    }
}
</style>
